<template>
	<view :class="currentTheme">
		<a-nabbar name="新增剧本" />
		<view class="u-padding-32">
			<item-box :padding="0">
				<view class="u-padding-left-40 u-padding-right-40">
					<label-box label="剧本名" labelWidth="130" labelSize="32" paddingTb="20">
						<select-item v-model="form.product" :list="larpList" @getIds="getlarpIds"
							v-if="larpList.length">
						</select-item>
						<view v-else>请先上传剧本</view>
					</label-box>
					<label-box label="售价" labelWidth="130" labelSize="32" paddingTb="20">
						<u-input type="digit" v-model="form.price" :clearable="false" border
							:borderColor="currentThemeObj.inputBorderColor" placeholder="请输入售价"
							:placeholder-style="`color:${currentThemeObj.placeholderColor}`"></u-input>
					</label-box>
					<label-box :label="option.type==='goods' ? '活动价' : '展会价'" labelWidth="130" labelSize="32"
						paddingTb="20">
						<u-input type="digit" v-model="form.exhibitPrice" :clearable="false" border
							:borderColor="currentThemeObj.inputBorderColor"
							:placeholder="`请输入${option.type==='goods' ? '活动价' : '展会价'}`"
							:placeholder-style="`color:${currentThemeObj.placeholderColor}`"></u-input>
					</label-box>
					<label-box label="库存" labelWidth="130" labelSize="32" v-if="option.type==='goods'" paddingTb="20">
						<u-input type="digit" v-model="form.stock" :clearable="false" border
							:borderColor="currentThemeObj.inputBorderColor" placeholder="请输入库存"
							:placeholder-style="`color:${currentThemeObj.placeholderColor}`"></u-input>
					</label-box>
				</view>

			</item-box>
			<view class="u-margin-top-20" v-if="option.type !== 'larp'">
				<item-box :padding="0">
					<view class="u-padding-left-40 u-padding-right-40">
						<label-box label="开本资料" labelWidth="130" labelSize="32" paddingTb="20">
							<view class="group-box u-flex">
								<view v-for="(item, index) in radioList" :key="index" class="u-margin-left-60">
									<v-radio :name="item.name"  v-model="radio" @change="radioChange" >
										<view class=" u-font-26 text-order-time" >{{item.text}}</view>
									</v-radio>
								</view>
								<!-- <u-radio-group v-model="form.radio">
									<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
										@change="radioChange" :active-color="currentThemeObj.primary">
										{{ item.text }}
									</u-radio>
								</u-radio-group> -->
							</view>
						</label-box>
					</view>
					<view class="u-border-top" v-show="showUrl">
						<view class="u-padding-left-40 u-padding-right-40">
							<label-box label="下载地址" labelWidth="130" labelSize="32" paddingTb="20">
										<u-input v-model="form.folioData" :clearable="false" border
										:borderColor="currentThemeObj.inputBorderColor" placeholder="请输入百度网盘地址"
										:placeholder-style="`color:${currentThemeObj.placeholderColor}`"></u-input>
							</label-box>
						</view>
					</view>
				</item-box>
			</view>
			<fixed-team btnText="确定" @btnClick="save"></fixed-team>
		</view>
	</view>
</template>

<script>
	import {
		getList,
		add,
		getDetail
	} from '@/api/crud.js'
	import vRadio from '@/components/itemRadio/itemRadio.vue'
	export default {
		components: {
			vRadio
		},
		data() {
			return {
				form: {
					"exhibitPrice": '',
					"price": '',
					"productId": '',
					"stock": '',
					"folioData": ''
				},
				radio:1,
				apiModule: 'shopApi',
				larpList: [],
				option: {
					type: 'goods'
				},
				loading: false,
				radioList: [{
						name: 1,
						text: '有'
					},
					{
						name: 0,
						text: '无'
					}
				],
				showUrl: true
			};
		},
		onLoad(option) {
			this.option = option;
			this.getLarp()
		},
		computed: {
			uid() {
				return this.$store.getters.loginForm.uid
			},
			apiType() {
				return this.option.type === 'larp' ? 'exhibitProduct' : 'mallProduct'
			}
		},
		methods: {
			//获取剧本列表
			getLarp() {
				getList({
					creatorId: this.uid
				}, 'product', this.apiModule, 'list').then(res => {
					this.larpList = res.map(val => ({
						value: val.id,
						label: val.name,
						people: val.people,
						issueModeName: val.issueModeName
					}));
				})
			},
			getlarpIds(id) {
				this.form.productId = id;
			},
			save() {
				const {
					exhibitPrice,
					price,
					productId,
					stock,
					folioData
				} = this.form;
				if (!productId) {
					this.$u.toast('请选择剧本')
					return false;
				}
				if (!Number(price)) {
					this.$u.toast('请填写商品售价')
					return false;
				}
				if (!Number(exhibitPrice)) {
					this.$u.toast('请填写商品优惠价格')
					return false;
				}
				//如果有售价和优惠价  优惠价不能大于售价
				if (!!Number(price) && !!Number(exhibitPrice)) {
					if(Number(exhibitPrice)>Number(price)){
						this.$u.toast('商品优惠价格不能大于售价')
						return false;
					}
				}
				if (!Number(stock) && this.option.type === 'goods') {
					this.$u.toast('请填写商品库存')
					return false;
				}
				if(this.showUrl && !folioData&&this.option.type !== 'larp'){
					this.$u.toast('请填写下载地址')
					return false;
				}
				const form = {
					...this.form,
					uid: this.uid
				}
				this.loading = true;
				add(form, this.apiType, this.apiModule).then(res => {
					this.routeBack('新增成功');
					this.loading = false;
				}).catch(() => {
					this.loading = false;
				})
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				this.showUrl =  e !== 0;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.hasTips {
		line-height: 74rpx;
	}

	.label-setting {
		width: 100rpx;
		line-height: 70rpx;
	}

	.no-padding {
		padding: 14rpx 0 14rpx 0 !important;
	}
	
	.group-box{
		line-height: 68rpx;
	}
</style>
